<template>
    <template v-if="user">

<!--        <van-cell title="头像" to="/user/edit" is-link @click="toEdit('avatar','头像',user.avatarUrl)">-->
<!--            <img style="height: 48px" :src="user.avatarUrl">-->
<!--        </van-cell>-->
        <van-cell title="昵称" is-link to="/user/edit" :value="user.username"  @click="toEdit('username', '昵称', user.username)"/>
        <van-cell title="账号" :value="user.userAccount"/>
<!--        <van-cell title="头像" is-link to="/user/avatar">-->
<!--            <img style="height: 48px" :src="user.avatarUrl"/>-->
<!--        </van-cell>-->


        <van-cell icon="label-o" to="/user/edit"  is-link center @click="toEdit('tags','标签',user.tags)">
            <template #title>
                <span>我的标签</span>
            </template>
            <template #value>
                <van-tag v-if="user.tags == '此用户暂未设置标签'" plain type="danger" style="margin-top: 8px; color: lightskyblue">
                    {{user.tags}}
                </van-tag>
                <van-tag v-else="user.tags != '此用户暂未设置标签'" v-for="tag in user.tags" plain type="danger" style="margin-right: 8px;margin-top: 8px; color: lightskyblue">
                    {{ tag }}
                </van-tag>
            </template>
        </van-cell>



        <van-cell title="性别" is-link :value="getGender(user.gender)" @click="toEdit('gender', '性别', user.gender)"/>
        <van-cell title="电话" is-link to="/user/edit" :value="user.phone" @click="toEdit('phone', '电话', user.phone)"/>
        <van-cell title="邮箱" is-link to="/user/edit" :value="user.email" @click="toEdit('email', '邮箱', user.email)"/>

<!--        <van-cell title="注册时间" :value="user.createTime"/>-->
    </template>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {getCurrentUser} from "../services/user";
import {ref ,onMounted} from "vue";





// ************************************************

const user = ref();

onMounted(async () => {
    let currentUser = await getCurrentUser();
    if (currentUser) {
        if (currentUser.tags && currentUser.tags != '[]') {
            currentUser.tags = JSON.parse(currentUser.tags)
        }else {
            currentUser.tags = "此用户暂未设置标签";
        }
        user.value = currentUser
    }
})

const getGender = (gender) =>{
    return gender === 0 ? '男' : '女';
}

const router = useRouter();

const toEdit = (editKey: string, editName: string, currentValue: string) => {
    router.push({
        path: '/user/edit',
        query: {
            editKey,
            editName,
            currentValue,
        }
    })
}
</script>

<style scoped>



</style>